// Name:                      List
// Description:               Define style for list  within ul/ol
//
// Component:                `.am-list`
//
// Modifiers:                `.am-list-static`  - 纯文字列表
//                           `.am-list-striped` - 斑马纹
//                           `.am-list-border` - 全边框
//
// ========================================================================


/* ========================================================================
   Component: List
 ========================================================================== */

/* For List_News widget */

.am-list {
  margin-bottom: @global-margin;
  padding-left: 0;

  >li {
    .am-list-item();
  }

  .hook-list();
}


/* Pure text list */

.am-list-static {
  > li {
    padding: .8rem .2rem;
  }

  &.am-list-border {
    > li {
      padding: 1rem;
    }
  }
}


/* with border */

.am-list-border {
  > li {
    border-width: 1px;

    &:first-child,
    &:first-child > a {
      .border-top-radius(@am-list-border-radius);
    }
    &:last-child,
    &:last-child > a {
      margin-bottom: 0;
      .border-bottom-radius(@am-list-border-radius);
    }

    > a {
      padding: 1rem;
      &:hover,
      &:focus {
        background-color: @am-list-hover-bg;
      }
    }
  }
}


/* Striped */

.am-list-striped {
  > li:nth-of-type(even) {
    background: #f5f5f5;
  }
}



// Mixins
// ========================================================================

.am-list-item() {
  position: relative;
  display: block;
  margin-bottom: -1px;
  background-color: @am-list-bg;
  border: 1px solid @am-list-border;
  border-width: 1px 0;

  // linked
  > a {
    .am-list-item-linked();
  }

  > .am-badge {
    float: right;
  }
  > .am-badge + .am-badge {
    margin-right: 5px;
  }
}


.am-list-item-linked() {
  display: block;
  padding: 1rem 0;
  //color: @am-list-link-color;

  // Hover state
  &:hover,
  &:focus {
    //background-color: @am-list-hover-bg;
  }

  &.am-active,
  &.am-active:hover,
  &.am-active:focus {
    z-index: 2;
    color: @am-list-active-color;
    background-color: @am-list-active-bg;
    border-color: @am-list-active-border;

    .am-list-item-heading {
      color: inherit;
    }
    .am-list-item-text {
      color: lighten(@am-list-active-bg, 40%);
    }
  }
}



// Custom content
// ========================================================================

.am-list-item-hd {
  margin-top: 0;
}

.am-list-item-text {
  //margin-top: 5px;
  //margin-bottom: 0;
  line-height: 1.4;
  font-size: 1.3rem;
  color: @gray-light;
  margin: 0;
}



// Hooks
// ========================================================================

.hook-list() {}
